<template>
  <div>
    <van-nav-bar title="首页"   />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swip-img" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="l-icon">
      <div class="l-icon1" @click="toindex(0)">
        <div class="l-icon1-a">
                  <img src="../../static/img/icon2.png" alt="" />
        </div>
        <div class="l-icon1-b">塔吊</div>
      </div>
      <div class="l-icon1" @click="toindex(1)">
        <div class="l-icon1-a">
            <img src="../../static/img/icon1.png" alt="" />

        </div>
        <div class="l-icon1-b">环境监测</div>
      </div>
      <div class="l-icon1" @click="toindex(2)">
        <div class="l-icon1-a">
          <img src="../../static/img/icon3.png" alt="" />
        </div>
        <div class="l-icon1-b">基坑</div>
      </div>
      <div class="l-icon1" @click="toindex(3)">
        <div class="l-icon1-a">
          <img src="../../static/img/icon4.png" alt="" />
        </div>
        <div class="l-icon1-b">车辆识别</div>
      </div>
    </div>
    <div class="big-img">
        <img src="../../static/img/墨刀工地 图.png" alt="">
   </div>
   <div class="l-date">
    
      <div class="two-bottom3-zi">
              <span class="two-bottom3-zi1">{{ this.safetyDays }}</span>
              <span class="two-bottom3-zi2">{{ this.countDownDays }}</span>
            </div>
        <div class="jiedian">项目节点</div>
               <div class="l-gongditu">
              <div class="l-gongditu-1" v-for="(item, index) in lgetNodeDates" :key="index">
                <div class="l-gongditu-1-1">
                  <img class="l-gongditu-img" :src="item.material_url" alt />
                </div>
                <div class="node-right">
                <div class="l-gongditu-1-2">{{ item.node_name }}</div>
                <div class="l-gongditu-1-3">{{ item.node_planend }}</div>
                <div
                  class="l-gongditu-1-4"
                  :class="{active:item.efficiency.indexOf('滞后')!==-1}"
                >{{item.efficiency}}</div>
                </div>
              </div>
            </div>
   </div>
   <div class="kong"></div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      images: [
        '../../static/img/swipers1.jpg',
        '../../static/img/swipers2.jpg',
        '../../static/img/swipers3.jpg',
        '../../static/img/swipers4.jpg',
      ],
       lgetNodeDates: [], //监控大屏大图下面的工程进度
         // 倒计时
      safetyDays: "",
      countDownDays: "",
    };
  },
  methods: {
 
    toindex(index) {
      let nameIndex = ['塔吊', '环境', '基坑', '车辆识别'];
      this.$router
        .push({
          name: nameIndex[index],
        })
        .catch((err) => err);
    },
  },
  mounted() {
     http.getNodeDates({}).then((res) => {
      console.log("监控大屏大图下面的工程进度", res.data);
      this.lgetNodeDates = res.data;
    });
        http.getBuildDate({}).then((r) => {
      console.log(r);
      this.safetyDays = r.data.safetyDays;
      this.countDownDays = r.data.countDownDays;
    });
    
  },
};
</script>
<style scoped>
.jiedian{
  margin-left: 12%;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 1rem;

}
.kong{
  height: 70px;
}

.l-gongditu{
   width: 75%;
  margin: 0 auto;
   margin-top: 2rem; 
}
 .l-gongditu-1 {
  width: 100%;
  margin: 0 auto;
 
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.l-gongditu-1-1{
  width: 30%;
    height: 7.3rem;
 /* background: forestgreen;  */
} 
.node-right{
   width: 40%; 
  height: 6.3rem;
  /* background: red; */
}
.l-gongditu-img {
   width: 11rem; 
  height: 7.3rem;
  border-radius: 1rem;
}

.l-gongditu-1-2 {
  /* text-align: center; */
  font-size: 1.8rem;
  font-weight: bold;
  
  /* color: #95adce; */
}
.l-gongditu-1-3 {
  /* text-align: center; */
  color: gray;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 0.5rem;
  /* color: #95adce; */
}
.l-gongditu-1-4 {
   color: green; 
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 0.5rem;
  /* text-align: center; */
  /* color: #95adce; */
}
.l-date{
  /* width: 95%;
  height: 40px;
  background: pink;
   margin: 0 auto;
   margin-top: 10px; */
}
.two-bottom3-zi {
  /* width: 70%;
  margin: 0 auto; */

  color: #95adce;
  font-weight: bolder;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-evenly;
  margin-top: 1rem;
}
.two-bottom3-zi1 {
  color: rgb(106, 106, 235);

  /* color: #abffbf; */
}
.two-bottom3-zi2 {
  /* color: #db723d; */
  color: rgb(247, 77, 77);
}
.swip-img {
  width: 100%;
  height: 20rem;
}
.l-icon {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.l-icon img {
  width: 4rem;
  height: 3.5rem;
}
.l-icon1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.l-icon1-b {
  color: rgb(109, 108, 108);
  margin-top: 0.1rem;
}
.big-img{
 width: 80%;
 height: 15rem;
 margin: 0 auto;
 margin-top: 1rem;
}
.big-img img{
    width: 100%;
    height: 15rem;
}
.active {
  color: red;
}
</style>